<template>
  <div class="">
    <div class="big-main">
      <div class="big-main-top-fixed"><img class="logo-text" src="@/assets/image/bg04.png" /></div>
      <div class="big-main-bottom-fixed"><img class="logo-text" src="@/assets/image/bg03.png" /></div>

      <div class="big-main-echarts">
        <div class="big-main-top">
          <img src="@/assets/image/logo.png" />
          <img class="logo-text" src="@/assets/image/logo-text.png" />
        </div>
        <div class="big-main-timer">
          <span>2023.06.12</span>
          <span>星期一</span>
          <span class="text-yellow">09:00</span>
        </div>
        <div class="big-main-box">
          <div class="big-main-box-left">
            <div class="big-main-box-left-top">
              <GroupItemSwiper titleName="模温机" :defaultList="mowenList" curClass="mowen"/>
              <GroupItemSwiper titleName="真空机器" :defaultList="mowenList" :_autoplay="1800" curClass="zhenkong"/>
              <GroupItemSwiper :_w="26.3" _bg="12" titleName="高压点冷机" :defaultList="zhenkongList" :_autoplay="2000" curClass="gaoya"/>
              <!-- <GroupItem titleName="艾嘉亚真空机" :defaultList="zhenkongList" />
              <GroupItem titleName="昌本点冷机" :defaultList="changbenList">
                <template #Tcurve>
                  <p class="flow-rate">
                    <span>流量</span><span class="flow-rate-box"></span>
                  </p>
                </template>
              </GroupItem> -->
              <!-- <ConstantTemperature /> -->
            </div>
            <div class="big-main-box-left-center">
              <img src="@/assets/image/bg02.png" alt="">
              <div class="big-main-box-left-center-item big-main-box-left-center-item1">
                <span>开机时长</span>
                <span>15H</span>
              </div>
              <div class="big-main-box-left-center-item big-main-box-left-center-item2">
                <span>用电</span>
                <span>156KW</span>
              </div>
            </div>
            <div class="big-main-box-left-bottom">
              <GroupItem titleName="ABB取件机" :defaultList="abbQuList" />
              <GroupItem titleName="ABB喷雾机" :defaultList="abbPenList" />
              <GroupItemBig titleName="压铸机主机" :defaultList="yazhuBigList" />
            </div>
          </div>
          <div class="big-main-box-right">
            <div class="big-main-box-right-top">
              <StartItem v-for="item in startTime" :key="item" :itemData="item" />
            </div>
            <div class="big-main-box-right-bottom">
              <!-- <ProdWeeksReport /> -->
              <div class="big-main-box-right-bottom-item">
                <ProdWeeksReport titleName="周生产汇报"/>
              </div>
              <div class="big-main-box-right-bottom-item">
                <StressEcherts echartsName="StressEcherts1" titleName="周设备能耗"/>
              </div>
            </div>
            <div class="big-main-box-right-bottom">
              <div class="big-main-box-right-bottom-item">
                <SpeedEcherts titleName="高速速度"/>
              </div>
              <div class="big-main-box-right-bottom-item">
                <StressEcherts echartsName="StressEcherts2" titleName="建压时间"/>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import GroupItem from "@/components/groupItem/index.vue"
import GroupItemSwiper from "@/components/groupItemSwiper/index.vue";
import GroupItemBig from "@/components/groupItemBig/index.vue"
import StartItem from "@/components/startItem/index.vue"
import ConstantTemperature from "@/views/components/constantTemperature/index.vue"
import ProdWeeksReport from "@/views/components/prodWeeksReport/index.vue"
import SpeedEcherts from "@/views/components/speedEcherts/index.vue"
import StressEcherts from "@/views/components/stressEcherts/index.vue"

import bg from "@/assets/image/icon12.png"

const mowenList = ref([
  {
    id: 1,
    status: "1",
    title: "M1",
    value_1: "设定 180°C",
    value_2: "出油 180°C",
    value_3: "回油180°C",
    color: ""
  },
  {
    id: 2,
    status: "1",
    title: "M1",
    value_1: "设定 180°C",
    value_2: "出油 180°C",
    value_3: "回油180°C",
    color: ""
  },
  {
    id: 3,
    status: "2",
    title: "M1",
    value_1: "设定 180°C",
    value_2: "出油 180°C",
    value_3: "回油180°C",
    color: ""
  },
  {
    id: 4,
    status: "2",
    title: "M1",
    value_1: "设定 180°C",
    value_2: "出油 180°C",
    value_3: "回油180°C",
    color: ""
  },
  {
    id: 5,
    status: "3",
    title: "M1",
    value_1: "设定 180°C",
    value_2: "出油 180°C",
    value_3: "回油180°C",
    color: ""
  }
])

const zhenkongList = ref([
{    id: 1,
    status: "",
    title: "M1",
    value_1: "延迟 20s",
    value_2: "真空度 100Mpa",
    value_3: "BD-001",
    color: ""
  },
  {
    id: 2,
    status: "",
    title: "M1",
    value_1: "延迟 20s",
    value_2: "真空度 100Mpa",
    value_3: "BD-001",
    color: ""
  },
  {
    id: 3,
    status: "",
    title: "M1",
    value_1: "延迟 20s",
    value_2: "真空度 100Mpa",
    value_3: "BD-001",
    color: ""
  },
  {
    id: 4,
    status: "",
    title: "M1",
    value_1: "延迟 20s",
    value_2: "真空度 100Mpa",
    value_3: "BD-001",
    color: ""
  },
  {
    id: 5,
    status: "",
    title: "M1",
    value_1: "延迟 20s",
    value_2: "真空度 100Mpa",
    value_3: "BD-001",
    color: ""
  }
])

const changbenList = ref([
  {
    id: 1,
    title: "延时时间",
    value: "58H",
    color: ""
  },
  {
    id: 2,
    title: "通水时间",
    value: "58H",
    color: ""
  },
  {
    id: 4,
    title: "运行状态",
    value: "暂停",
    color: "text-red-color"
  }
])

const shijiekeList = ref([
  {
    id: 1,
    title: "开始位置",
    value: "58H",
    color: ""
  },
  {
    id: 2,
    title: "真空度",
    value: "58H",
    color: ""
  }
])

const abbQuList = ref([
  {
    id: 1,
    title: "单模开始时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 2,
    title: "单模结束时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 4,
    title: "单模运行时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 5,
    title: "运行状态",
    value: "关闭",
    color: ""
  }
])

const abbPenList = ref([
{
    id: 1,
    title: "单模开始时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 2,
    title: "单模结束时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 4,
    title: "单模运行时间",
    value: "16:00:00",
    color: ""
  },
  {
    id: 5,
    title: "运行状态",
    value: "关闭",
    color: ""
  }
])

const yazhuBigList = ref([
  {
    id: 1,
    title: "压射力KN",
    value: "65H",
    color: ""
  },
  {
    id: 2,
    title: "压射比压",
    value: "65H",
    color: ""
  },
  {
    id: 3,
    title: "压射速度m/s",
    value: "58H",
    color: ""
  },
  {
    id: 4,
    title: "二块位置mm",
    value: "59H",
    color: ""
  },
  {
    id: 11,
    title: "锤头跟踪位置mm",
    value: "58H",
    color: ""
  },
  {
    id: 22,
    title: "冷却开始时间s",
    value: "58H",
    color: ""
  },
  {
    id: 33,
    title: "铝液温度℃",
    value: "27.34",
    color: ""
  },
  {
    id: 44,
    title: "模具温度℃",
    value: "27.34",
    color: ""
  },
  {
    id: 45,
    title: "冷却水流量L/min",
    value: "27.34",
    color: ""
  },
  {
    id: 46,
    title: "冷却水流量L/min",
    value: "27.34",
    color: ""
  },
  {
    id: 47,
    title: "填充时间S",
    value: "27.34",
    color: ""
  },
  {
    id: 48,
    title: "保压时间S",
    value: "27.34",
    color: ""
  },
  {
    id: 49,
    title: "留模时间S",
    value: "27.34",
    color: ""
  },
  {
    id: 50,
    title: "料柄厚度mm",
    value: "27.34",
    color: ""
  },
  {
    id: 51,
    title: "铝液用量Kg（保温炉）",
    value: "27.34",
    color: ""
  },
  {
    id: 52,
    title: "运行状态",
    value: "关闭",
    color: ""
  }
])

const startTime = ref([
  {
    id: 1,
    title: "本日开机时间",
    value: "30",
    unit: "H",
    color: ""
  },
  {
    id: 2,
    title: "本日运行时间",
    value: "30",
    unit: "H",
    color: ""
  },
  {
    id: 3,
    title: "本日暂停时间",
    value: "30",
    unit: "H",
    color: ""
  },
  {
    id: 4,
    title: "每小时生产量",
    value: "30",
    unit: "H",
    color: ""
  },
  {
    id: 5,
    title: "本日生产量",
    value: "30000",
    unit: "",
    color: ""
  },
  {
    id: 6,
    title: "本日OEE",
    value: "50",
    unit: "%",
    color: ""
  }
])


</script>
<style lang="scss" scoped>
.big-main {
  position: fixed;
  width: 100%;
  height: 100%;
  background: url(../../assets/image/bg01.png) no-repeat #0A1F4C;
  // background-color: linear-gradient(#000,#fff,#1F5973);
  background-size: 100%;
}

.big-main-top-fixed,
.big-main-bottom-fixed {
  position: absolute;
  width: 100%;

  img {
    width: 100%;
  }
}

.big-main-top-fixed {
  top: 0;
}

.big-main-bottom-fixed {
  bottom: 0;
}

.big-main-echarts {
  position: relative;
  width: 100%;
  height: 100%;
}

.big-main-top {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  height: 9.5rem;
  color: #fff;
  font-weight: 400;
  align-items: center;

  img {
    height: 3.6rem;
  }

  .logo-text {
    height: 6.8rem;
  }
}

.big-main-timer {
  font-size: 2rem;
  color: #fff;
  position: absolute;
  top: 6rem;
  right: 4rem;

  span {
    margin-right: 1rem;
  }

  .text-yellow {
    color: #DCC882;
  }
}

.big-main-box {
  padding: 2rem 5rem;
  display: flex;
}

.big-main-box-left,
.big-main-box-right {
  width: calc(50% - 2rem);
}

.big-main-box-right {
  margin-left: 4rem;
}

.big-main-box-left-top {
  display: flex;
  position: relative;
  z-index: 99;
}

.big-main-box-left-center {
  margin: -9rem 0 0 0;
  position: relative;
  img {
    height: 52rem;
  }
  .big-main-box-left-center-item{
    width: 18rem;
    height: 3rem;
    line-height: 3rem;
    background:  url(../../assets/image/icon13.png) no-repeat;
    position: absolute;
    top:10rem;
    right: 5rem;
    display: flex;
    justify-content: center;
    span{
      padding:0 .5rem;
      color: #fff;
    }
    span:nth-child(2){
      color: #00FFFF;
    }
  }
  .big-main-box-left-center-item2{
    top:14rem;
    right: 0rem;
    span:nth-child(2){
      color: #42FF00;
    }
  }
}

.big-main-box-left-bottom {
  display: flex;
  align-items: flex-end;
  margin-top: -1.2rem;
}

.big-main-box-right-top {
  padding: 3rem 1rem 0 0;
  display: flex;
  justify-content: space-between;
}

.big-main-box-right-center {
  margin: 6rem 0 4rem 0;
}

.big-main-box-right-bottom {
  display: flex;
  margin-top: 4rem;

  .big-main-box-right-bottom-item {
    width: 50%;
  }
}
.flow-rate{
  display: flex;
  margin-top: 1rem;
  span:nth-child(1){
    flex: none;
  }
  .flow-rate-box{
    margin-left: 1rem;
    display: block;
    width: 100%;
    background: rgba(0, 170, 255, 0.3);
    position: relative;
    &::before{
      display: block;
      content:"";
      width: 50%;
      height: 100%;
      position: absolute;
      left:10%;
      background: #00FFFF;
    }
  }
}

</style>
